<template>
	<view class="grid_wrap">
		<tn-grid :col="col">
			<block v-for="(item, index) in list" :key="index">
				<!-- H5 -->
				<!-- #ifndef MP-WEIXIN -->
				<tn-grid-item>
					<img :src="item.path" alt="">
					<view style="padding: 30rpx;">{{ item.name }}</view>
				</tn-grid-item>
				<!-- #endif-->

				<!-- 微信小程序 -->
				<!-- #ifdef MP-WEIXIN -->
				<tn-grid-item :style="{width: gridItemWidth}">
					<img :src="item.path" alt="">
					<view style="padding: 30rpx;">{{ item.name }}</view>
				</tn-grid-item>
				<!-- #endif-->
			</block>
		</tn-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				col: 4,
				list: [{
					path: "/static/sort/yc.png",
					name: '叶菜类'
				}, {
					path: "/static/sort/gj.png",
					name: '根茎类'
				}, {
					path: "/static/sort/gs.png",
					name: '果实类',
				}, {
					path: "/static/sort/hc.png",
					name: '花菜类'
				}, {
					path: "/static/sort/dl.png",
					name: '豆类'
				}, {
					path: "/static/sort/lj.png",
					name: '鳞茎类'
				}, {
					path: "/static/sort/mg.png",
					name: '菌菇类'
				}]
			}
		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			}
		}
	}
</script>

<style scoped lang="scss">
	.grid_wrap {
		margin: 20rpx;
		padding: 30rpx 10rpx 10px;
		background-color: #fff;
	}
	img {
		margin-bottom: -15rpx;
		width: 80rpx;
		height: 80rpx;
	}
</style>